<template>
    <!-- 系统管理/层级管理 -->
    <div class="hierarchy">
        <!-- <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div> -->
        <div class="delete_btn">
            <span>层级列表</span>
            <!-- <a-button style="margin-left:20px;" v-if="deletdBtnShow" @click="batchDelete()">批量删除</a-button> -->
        </div>
        <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, }" -->
        <a-table 
            :loading="tableLoading"
            :columns="columns" 
            :data-source="data" 
            :pagination="false" 
            bordered
            :defaultExpandedRowKeys="defaultExpandedRowKeys"
            rowKey="id"
            childrenColumnName="organizeList"
            :expandIcon="expandIcon"
        >
            <a slot="action" slot-scope="text, record" href="javascript:;">
                <span style="margin-right:8px;" @click="editDrawer(record)">编辑</span>
                <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        更多 <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <span style="margin-right:8px;" @click="showDrawer(record)">详情</span>
                        </a-menu-item>
                        <a-menu-item>
                            <span style="margin-right:8px;" @click="addDrawer(record)" v-if="record.grade !== 3">添加下级</span>
                        </a-menu-item>
                        <a-menu-item>
                            <span style="margin-right:8px;" @click="deleteDrawer(record)" v-if="record.grade !== 0">删除</span>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </a>
        </a-table>
        <!-- 删除对话框 -->
        <a-modal v-model="deleteVisible" title="确认删除" @ok="handleOk">
            <p style="text-align:center;">确认删除？</p>
        </a-modal>
        <!-- 右滑抽屉 -->
        <a-drawer
            :title="drawerTitle"
            :placement="placement"
            :closable="false"
            :visible="visible"
            @close="onClose"
            width="500"
        >
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                labelAlign="left"
            >
                <a-form-model-item ref="name" :label="labelName" prop="name">
                    <a-input
                        v-model="form.name"
                        placeholder="请输入"
                        @blur="() => {$refs.name.onFieldBlur()}"
                        :disabled="nameDisabled"
                    />
                </a-form-model-item>

                <a-form-model-item ref="code" :label="labelCode" prop="code">
                    <a-input
                        v-model="form.code"
                        placeholder="请输入"
                        @blur="() => {$refs.code.onFieldBlur()}"
                        :disabled="codeDisabled"
                    />
                </a-form-model-item>
                <a-form-model-item ref="parent" label="父层级" prop="parent">
                    <a-input
                        v-model="form.parent"
                        @blur="() => {$refs.parent.onFieldBlur()}"
                        :disabled="parentDisabled"
                    />
                </a-form-model-item>
                <a-form-model-item ref="sortNo" label="排序" prop="sortNo">
                    <a-input-number 
                        id="inputNumber" 
                        v-model="form.sortNo" 
                        @change="numberChange" 
                        style="width:100%;" 
                    />
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit" :disabled="btnDisabled">
                        确定
                    </a-button>
                    <a-button style="margin-left: 10px;" @click="cancelForm">
                        取消
                    </a-button>
                </a-form-model-item>
            </a-form-model>
        </a-drawer>
        
        <!-- 批量删除对话框 -->
        <a-modal
            title="批量删除"
            :visible="batchDeleteVisible"
            :confirm-loading="batchDeleteConfirmLoading"
            @ok="batchDeleteHandleOk"
            @cancel="batchDeleteHandleCancel"
        >
            <p style="text-align:center;">确认删除？</p>
        </a-modal>
    </div>
</template>

<script>
    const columns = [
        {
            title: '层级名称',
            dataIndex: 'name',
            key: 'name',
        },
        { 
            title: '操作', 
            dataIndex: '', 
            key: '', 
            scopedSlots: { 
                customRender: 'action' 
            },
            width: '12%',
            align: 'center',
        },
    ];

    import BottomPagination from '../meter/BottomPagination'
    import { getOrganizeAll, addOrganize, editOrganize, deleteOrganize, getDeatailsById } from '@/api/api'

    export default {
        name: "Hierarchy",
        components: {
            BottomPagination        
        },
        data () {
            return {
                data: [],
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false,
                defaultExpandedRowKeys: [],
                pageNo: 1,
                pageSize: 10,
                visible: false,
                placement: 'right',
                drawerTitle: '编辑层级',
                labelCol: { span: 7 },  
                wrapperCol: { span: 16 },
                other: '',
                form: {
                    name: '',
                    parent: '',
                    code: '',
                    sortNo: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    parent: [
                        { required: true, message: '请选择父级', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入编码', trigger: 'blur' },
                    ],
                    sortNo: [
                        { required: true, message: '请输入排序', trigger: 'blur' },
                    ],
                },
                validStatus: true, // 当前表单验证状态，true表示成功，false表示失败
                labelName: '大区名称',
                labelCode: '大区编码',
                id: '',
                grade: 0, // 组织等级
                parentId: '',
                deleteVisible: false, // 删除对话框
                batchDeleteVisible: false, // 批量删除
                batchDeleteConfirmLoading: false,
                nameDisabled: false,
                codeDisabled: false,
                parentDisabled: false,
                btnDisabled: false,
                addMode: true, // true为添加，false为编辑
                ids: '',
            }
        },
        created() {
            this.getOrganizeAll()
        },
        methods: {
            // 获取所有组织结构数据
            getOrganizeAll(){
                let params = {}
                this.tableLoading = true
                getOrganizeAll(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        this.data = res.result
                        this.defaultExpandedRowKeys.push(res.result[0].id)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 自定义展开图标
            expandIcon(props){
                if (props.record.organizeList){
                    if(props.record.organizeList.length > 0){
                        if (props.expanded) {
                            return <a style="margin-right:5px" onClick={e=> {
                                props.onExpand(props.record, e);
                            }}><a-icon type="minus-square" style="fontSize:16px;"/></a>
                        } else{
                            return <a style="margin-right:5px" onClick={e => {
                                props.onExpand(props.record, e);
                            }}><a-icon type="plus-square" style="fontSize:16px;"/></a>
                        }
                    }else{
                        return <span style="margin-right:5px"></span>
                    }
                }
            },
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
            },
            // 详情
            showDrawer(record) {
                this.visible = true;
                this.drawerTitle = '详情'
                this.nameDisabled = true
                this.codeDisabled = true
                this.parentDisabled = true
                this.btnDisabled = true
                this.form.name = record.name
                this.form.code = record.code
                this.form.sortNo = record.sortNo
                if(record.parentId !== null){
                    let params = {
                        id: record.parentId
                    }
                    getDeatailsById(params).then((res)=>{
                        if(res.success){
                            this.form.parent = res.result.name
                        }
                    })
                }
            },
            onClose() {
                this.visible = false;
            },
            // 编辑
            editDrawer(record) {
                this.addMode = false
                this.id = record.id
                this.nameDisabled = false
                this.codeDisabled = true
                this.parentDisabled = true
                this.btnDisabled = false
                this.visible = true;
                if(record.grade === 0){
                    this.drawerTitle = '编辑'
                    this.labelName = '总部名称'
                    this.labelCode = '总部编码'
                    this.btnDisabled = true
                }else if(record.grade === 1){
                    this.drawerTitle = '编辑大区'
                    this.labelName = '大区名称'
                    this.labelCode = '大区编码'
                }else if(record.grade === 2){
                    this.drawerTitle = '编辑城市'
                    this.labelName = '城市名称'
                    this.labelCode = '城市编码'
                }else{
                    this.drawerTitle = '编辑仓库'
                    this.labelName = '仓库名称'
                    this.labelCode = '仓库编码'
                }
                this.form.name = record.name
                this.form.code = record.code
                this.form.sortNo = record.sortNo
                if(record.parentId !== null){
                    let params = {
                        id: record.parentId
                    }
                    getDeatailsById(params).then((res)=>{
                        if(res.success){
                            this.form.parent = res.result.name
                        }
                    })
                }
            },
            // 添加
            addDrawer(record) {
                this.addMode = true
                this.visible = true
                this.nameDisabled = false
                this.codeDisabled = false
                this.parentDisabled = true
                this.btnDisabled = false
                this.form.name = ''
                this.form.code = ''
                this.form.sortNo = ''
                this.form.parent = record.name
                this.parentId = record.id
                if(record.grade === 0){
                    this.grade = 1
                    this.drawerTitle = '添加大区'
                    this.labelName = '大区名称'
                    this.labelCode = '大区编码'
                }else if(record.grade === 1){
                    this.grade = 2
                    this.drawerTitle = '添加城市'
                    this.labelName = '城市名称'
                    this.labelCode = '城市编码'
                }else{
                    this.grade = 3
                    this.drawerTitle = '添加仓库'
                    this.labelName = '仓库名称'
                    this.labelCode = '仓库编码'
                }
                // 只有验证失败，新增的时候才重置验证状态
                if(this.validStatus === false) {
                    this.$refs.ruleForm.resetFields()
                }
            },
            // 删除
            deleteDrawer(record) {
                this.deleteVisible = true;
                this.id = record.id
            },
            handleOk(e) {
                let params = {
                    id: this.id,
                }
                deleteOrganize(params).then((res)=>{
                    if(res.success){
                        this.getOrganizeAll()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
                this.deleteVisible = false;
            },
            // 表单
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.validStatus = true
                        if(this.addMode){ // 添加
                            let params = {
                                grade: this.grade,
                                name: this.form.name,
                                code: this.form.code,
                                parentId: this.parentId,
                                sortNo: this.form.sortNo,
                            }
                            addOrganize(params).then((res)=>{
                                if(res.success){
                                    this.visible = false
                                    if( this.regionId !== '' && this.cityId !== '' && this.organizeId !== '' ){
                                        this.getOrganizeAll()
                                    }
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }else{ // 修改
                            let params = {
                                id: this.id,
                                name: this.form.name,
                                sortNo: this.form.sortNo,
                            }
                            editOrganize(params).then((res)=>{
                                if(res.success){
                                    this.visible = false
                                    this.getOrganizeAll()
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                    } else {
                        this.validStatus = false
                        return false;
                    }
                });
            },
            cancelForm() {
                this.visible = false;
            },
            numberChange(value) {
                console.log('changed', value);
            },
            // 批量删除
            batchDelete() {
                this.batchDeleteVisible = true
                this.ids = this.selectedRowKeys.join(',')
            },
            batchDeleteHandleOk(e) {
                this.batchDeleteConfirmLoading = true;
                let params = {
                    id: this.ids,
                }
                deleteOrganize(params).then((res)=>{
                    if(res.success){
                        this.batchDeleteVisible = false;
                        this.batchDeleteConfirmLoading = false;
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        this.deletdBtnShow = false
                        this.getOrganizeAll()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            batchDeleteHandleCancel(e) {
                this.batchDeleteVisible = false;
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .hierarchy{
        width: 100%;
        padding: 10px;
        font-style: Microsoft YaHei;
        font-size: 14px;
        background: #ffffff;
        h3{
            height: 50px;
            line-height: 50px;
            font-weight: bold;
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .delete_btn{
            height: 32px;
            line-height: 32px;
            margin-bottom: 10px;
            span{
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
</style>
